import React from 'react'

import store from '../../store/store'

import {increaseAction, decreaseAction} from '../../store/actions/count_action'

export default function Count() {

  const { count } = store.getState()

  const increase = () => {
    store.dispatch(increaseAction(1))
  }

  const decrease = () => {
    store.dispatch(decreaseAction(1))
  }

  const whenOddIncrease = () => {
    if (count%2 !== 0) {
      store.dispatch(increaseAction(1))
    }
  }

  const delayIncrease = () => {
    setTimeout(() => {
      store.dispatch(increaseAction(1))
    }, 2000)
  }

  return (
    <div>
      <h2>Count</h2>
      <p>count: {count}</p>
      <div>
        <button onClick={increase}>加</button>
        <button onClick={decrease}>减</button>
        <button onClick={whenOddIncrease}>偶数加</button>
        <button onClick={delayIncrease}>延迟加</button>
      </div>
    </div>
  )
}
